﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HowToUseAjaxAutoComplete.aspx.cs"
    Inherits="MicrosoftAjaxSample.HowToUseAjaxAutoComplete" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to use Ajax auto complete in asp.net | Microsoft Ajax Sample</title>
    <link href="Style/AutoComplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function fillWebsiteDetails(text, url) {
            /// <summary>
            /// fill website details when click on suggestions.
            /// </summary>
            document.getElementById('websiteUrl').innerHTML = url;
            document.getElementById('suggestions').style.display = 'none';
            document.getElementById('autoCompleteBox').value = text;
        }

        function getSuggestions(webSiteTitle) {
            /// <summary>
            /// get suggestions based on the entered text
            /// </summary>
            MicrosoftAjaxSample.WebsiteList.WebsiteDetails(webSiteTitle, OnComplete, OnFailer);
        }

        function OnComplete(result) {
            /// <summary>
            /// Display suggestions when success
            /// </summary>
            document.getElementById('autoSuggestionsList').innerHTML = '';
            var website = (typeof result) == 'string' ? eval('(' + result + ')') : result;
            if (website.length > 0) {
                for (var i = 0; i < website.length; i++) {
                    document.getElementById('autoSuggestionsList').innerHTML +=
                    '<li onclick=fillWebsiteDetails(this.innerHTML,"' + website[i].NavigationLink + '");>'
                    + website[i].Title + '</li>';
                }
                document.getElementById('suggestions').style.display = 'block';
            }
        }

        function OnFailer(result) {
            /// <summary>
            /// show error message when there is an error
            /// </summary>
            alert("Error: " + result.get_message());
        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="WebsiteDetailsScriptManager" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebsiteList.asmx" />
        </Services>
    </asp:ScriptManager>
    <div>
        <input id="autoCompleteBox" type="text" onkeyup="getSuggestions(this.value);" />
        <div class="suggestionsBox" id="suggestions" style="display: none;">
            <ul id="autoSuggestionsList" class="suggestionList">
            </ul>
        </div>
        <div id="websiteUrl">
        </div>
    </div>
    </form>
</body>
</html>
